<template>
  <div class="app-container">
    <div class="divStyle">
      <div class="borderStyle" @click="gotoAdd">
        <div class="flex-a-c"><span class="imgStyle"></span><span class="font16">新建流程图</span></div>
        <div><span class="addStyle"></span></div>
      </div>
      <div class="processStyle" v-if="arr.length>0">
        <div v-for="(item,index) in arr" :key="index" class="divWrapStyle" @mouseenter="mouseenterFun(index)" @click="gotoDetail(item)">
          <div class="topStyle">
            <img :src="item.pic" class="picStyleItem" v-if="item.pic">
          </div>
          <div class="b-f bottomStyle" @click.stop>
            <div><span class="iconStyle"></span>{{ item.name }}</div>
            <el-dropdown trigger="click" v-if="index==nowIndex">
              <div class="dotWrapStyle" v-if="index==nowIndex"><span class="dotStyle"></span><span class="dotStyle"></span><span
                  class="dotStyle"></span></div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="reviewFun(item.pic)" v-if="item.pic">
                  <div class="flex-a-c"><span class="m-r-8 pic1"></span>预览</div>
                </el-dropdown-item>
                <el-dropdown-item @click.native="reNameFun(item)">
                  <div class="flex-a-c"><span class="m-r-8 pic2"></span>重命名</div>
                </el-dropdown-item>
                <el-dropdown-item @click.native="cooperationFun(item)">
                  <div class="flex-a-c"><span class="m-r-8 pic3"></span>分享协作</div>
                </el-dropdown-item>
                <el-dropdown-item @click.native="publishFun(item)">
                  <div class="flex-a-c"><span class="m-r-8 pic4"></span>发布和公开</div>
                </el-dropdown-item>
                <el-dropdown-item @click.native="copyFun(item)">
                  <div class="flex-a-c"><span class="m-r-8 pic5"></span>克隆</div>
                </el-dropdown-item>
                <el-dropdown-item @click.native="downFun(item)" v-if="item.pic">
                  <div class="flex-a-c"><span class="m-r-8 pic6"></span>下载</div>
                </el-dropdown-item>
                <el-dropdown-item @click.native="delFun(item)">
                  <div class="flex-a-c"><span class="m-r-8 pic7"></span>删除</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div v-else style="padding-top: 150px;">
        <EmptyComp :emptyConfig="emptyConfig" containerH="25vh" />
      </div>
      <div class="flex-between m-t" v-if="total > 12">
        <div></div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryParams.currentPage"
          :page-size="queryParams.pageSize" background layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <AddNewProcess ref="addNewRef"></AddNewProcess>
    <el-image ref="image__preview" style="width: 10px; height: 10px;display: none;" class="no-show" :src="url" :preview-src-list="srcList">
    </el-image>
    <RenameDialog ref="renameDialog" @close="initData" />
    <CooperationDialog ref="cooperationDialog" @close="initData" />
    <PublishDialog ref="publishDialog" @close="initData" />
  </div>
</template>

<script>
import { search, deleteFun, clone } from "@/api/file"
import RenameDialog from "./dialog/renameDialog.vue"
import AddNewProcess from "./dialog/addNewProcesss.vue"
import CooperationDialog from "./dialog/cooperationDialog.vue"
import PublishDialog from "./dialog/publishDialog.vue"
export default {
  name: 'myProcess',
  components: {
    AddNewProcess,
    RenameDialog,
    CooperationDialog,
    PublishDialog
  },
  data() {
    return {
      nowIndex: -1,
      arr: [],
      url: '',
      srcList: [],
      isEdit: false,
      total: 0,
      queryParams: {
        currentPage: 1,
        pageSize: 12,
        queryString: {
          name: ''
        }
      },
      emptyConfig: {
        title: "",
        imageSvg: "empty",
        width: "20vh",
        height: "20vh",
      },
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData(name) {
      if (name) {
        this.queryParams.queryString.name = name;
      } else {
        this.queryParams.queryString.name = '';
      }
      search({
        "currentPage": this.queryParams.currentPage,
        "pageSize": this.queryParams.pageSize,
        "queryString": {
          ...this.queryParams.queryString
        }
      }).then(async (res) => {
        let _arr = [];
        await res.rows.map(async (item) => {
          let pic = await this.changeToPic(item);
          _arr.push({
            ...item,
            pic
          })
        })
        this.arr = _arr;
        this.total = res.total || 0
      })
    },
    async changeToPic(item) {
      let imgData = '';
      if (item.picPath) {
        let blob = new Blob([item.picPath], {
          type: 'image/svg+xml'
        })
        let svgUrl = await this.blobToUrl(blob)
        imgData = await this.drawToCanvas(svgUrl)
      }
      console.log('%c [  ]-173', 'font-size:13px; background:pink; color:#bf2c9f;', imgData)
      return imgData
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    reNameFun(info) {
      this.$refs.renameDialog.show({ data: info, title: "重命名" })
    },
    cooperationFun(info) {
      this.$refs.cooperationDialog.show({ data: info, title: "选择协作者" })
    },
    publishFun(info) {
      this.$refs.publishDialog.show({ data: info, title: "发布和公开" })
    },
    copyFun(info) {
      this.$confirm(`确认克隆一份【${info.name}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          clone({ id: info.id }).then(() => {
            this.initData()
          })
        })
    },
    async downFun(item) {
      let blob = new Blob([item.picPath], {
        type: 'image/svg+xml'
      })
      let svgUrl = await this.blobToUrl(blob)
      let imgData = await this.drawToCanvas(svgUrl)

      console.log('%c [  ]-193', 'font-size:13px; background:pink; color:#bf2c9f;', imgData)
      let a = document.createElement('a')
      a.href = imgData
      a.download = '图片.png'
      a.click()
    },
    blobToUrl(blob) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.onload = evt => {
          resolve(evt.target.result)
        }
        reader.onerror = err => {
          reject(err)
        }
        reader.readAsDataURL(blob)
      })
    },
    drawToCanvas(svgUrl) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
        img.setAttribute('crossOrigin', 'anonymous')
        img.onload = async () => {
          try {
            let canvas = document.createElement('canvas')
            canvas.width = img.width
            canvas.height = img.height
            let ctx = canvas.getContext('2d')
            ctx.fillStyle = '#F6F7F8';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            // 清空画布并填充背景颜色
            ctx.drawImage(img, 0, 0, img.width, img.height)
            resolve(canvas.toDataURL())
          } catch (error) {
            reject(error)
          }
        }
        img.onerror = e => {
          reject(e)
        }
        img.src = svgUrl
      })
    },
    delFun(info) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteFun({ id: info.id }).then(() => {
            this.initData()
          })
        })
    },
    reviewFun(url) {
      this.url = url;
      this.srcList = [this.url];
      setTimeout(() => {
        this.$refs.image__preview.clickHandler();
      }, 100);
    },
    gotoAdd() {
      this.$refs.addNewRef.show({
        title: '新建流程图'
      })
    },
    gotoDetail(row) {
      this.$router.push({
        name: 'ProcessonEdit',
        query: {
          id: row.id
        }
      })
    },
    mouseenterFun(val) {
      this.nowIndex = val
    },
    mouseleaveFun() {
      this.nowIndex = -1
    }
  }
}
</script>

<style lang="scss" scoped>
  .my-process-designer {
    height: calc(100vh - 200px);
  }
  :deep(.el-tabs__active-bar) {
    background-color: #1784fc;
    width: 72px;
  }
  :deep(.el-tabs__nav-wrap::after) {
    background-color: #e9ecf1;
  }
  :deep(.el-tabs__item.is-active) {
    color: #333;
    font-weight: bold;
    font-size: 18px !important;
  }

  :deep(.el-tabs__item) {
    font-size: 18px !important;
    font-weight: 500;
    color: #868b8f;
    height: 50px;
  }
  .divStyle {
    min-height: 70vh;
    cursor: pointer;
  }

  .borderStyle {
    box-sizing: border-box;
    margin-top: 17px;
    width: 298px;
    padding: 16px 20px;
    border-radius: 4px;
    border: 1px solid #e9ecf1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .imgStyle {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('~@/assets/img/progress.png') no-repeat center;
      margin-right: 12px;
    }
    .addStyle {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('~@/assets/img/add.png') no-repeat center;
    }
  }
  .picStyle {
    padding-top: 153px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .developStyle {
    width: 422px;
    height: 241px;
    background: url('~@/assets/img/develop.png') no-repeat center;
    background-size: 422px 241px;
  }
  .pic1 {
    display: inline-block;
    width: 20px;
    height: 26px;
    background: url('~@/assets/img/yulan.png') no-repeat center;
  }
  .pic2 {
    display: inline-block;
    width: 20px;
    height: 26px;
    background: url('~@/assets/img/rename.png') no-repeat center;
  }
  .pic3 {
    display: inline-block;
    width: 20px;
    height: 26px;
    background: url('~@/assets/img/fenxiang.png') no-repeat center;
  }
  .pic4 {
    display: inline-block;
    width: 20px;
    height: 26px;
    background: url('~@/assets/img/publish.png') no-repeat center;
  }
  .pic5 {
    display: inline-block;
    width: 20px;
    height: 26px;
    background: url('~@/assets/img/copy.png') no-repeat center;
  }
  .pic6 {
    display: inline-block;
    width: 20px;
    height: 26px;
    background: url('~@/assets/img/downLoad.png') no-repeat center;
  }
  .pic7 {
    display: inline-block;
    width: 20px;
    height: 26px;
    background: url('~@/assets/img/del.png') no-repeat center;
  }
  .textStyle {
    color: #868b8f;
    text-align: center;
  }
  .bottomStyle {
    height: 48px;
    padding: 0 20px;
    font-weight: 500;
    color: #333333;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .topStyle {
    background: #f6f7f8;
    height: calc(100% - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .divWrapStyle {
    display: inline-block;
    height: 221px;
    width: calc((100% - 192px) / 6);
    box-sizing: border-box;
    border-radius: 4px 4px 0px 0px;
    border: 1px solid #e9ecf1;
    margin-right: 32px;
    margin-top: 20px;
  }
  .divWrapStyle:nth-child(6n) {
    margin-right: 0;
  }
  .divWrapStyle:hover {
    box-shadow: 0px 0px 8px 4px rgba(32, 43, 60, 0.1);
  }
  .iconStyle {
    display: inline-block;
    background: url('~@/assets/img/jiagou.png') no-repeat center;
    width: 15px;
    height: 15px;
    margin-right: 15px;
  }
  .dotWrapStyle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .dotStyle {
      width: 2px;
      height: 2px;
      background: #000;
      border-radius: 50%;
      margin-right: 2px;
    }
    .dotStyle:last-child {
      margin-right: 0;
    }
  }
  .dotWrapStyle:hover {
    // width: 20px;
    // height: 20px;
    background: #f2f2f2;
    border-radius: 2px;
  }
  .picStyleItem {
    width: 100%;
    // height: 100%;
    background-size: cover;
    padding: 15px;
  }
  .inputStyle {
    position: absolute;
    right: 60px;
    z-index: 1;
    display: inline-block;
    width: 320px;
    height: 40px;
    line-height: 40px;
  }
</style>
